接下來就是登入後需要呈現的畫面了!
<template>
<div id="app">
<v-app id="inspire" class="xxx">
<v-app-bar app clipped-left color="teal lighten-3" dense>
<v-icon left>{{ icons.mdiShareVariant }}</v-icon>
<div class="mx-4"></div>
<v-icon class="mx-4" large>
</v-icon>
<v-toolbar-title class="mr-12 align-center">
<span class="font-weight-thin font-italic display-1">BlogeR</span>
</v-toolbar-title>
<v-spacer>
</v-spacer>
<v-btn icon style="right:20px" v-on:click="logout()">
<v-icon> logout</v-icon>
</v-btn>
<div class="mx-24"></div>
</v-app-bar>
<v-main>
<v-carousel>
<router-view />
<v-carousel-item v-for="(it,i) in its" :key="i" :src="it.src"></v-carousel-item>
</v-carousel>
<v-container v-bind="{ [`grid-list-lg`]: true }" fluid>
<v-layout row wrap>
<v-flex v-for="n in 9" :key="n" xs4>
<v-card flat tile>
<v-img :src="`https://unsplash.it/150/300?image=${Math.floor(Math.random() * 200) + 1}`" height="150px"></v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-main>
</v-app>
</div>
</template>
<script>
import {
mdiAccount,
mdiPencil,
mdiShareVariant,
mdiDelete,
} from '@mdi/js'
export default {
props: {
source: String,
},
methods: {
logout() {
const vm = this;
localStorage.clear();
vm.$router.push('/');
}
},
data: () => ({
its: [{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
}
],
icons: {
mdiAccount,
mdiPencil,
mdiShareVariant,
mdiDelete,
},
drawer: null,
items: [{
icon: 'mdi-trending-up',
text: 'Most Popular'
},
{
icon: 'mdi-youtube-subscription',
text: 'Subscriptions'
},
{
icon: 'mdi-history',
text: 'History'
},
{
icon: 'mdi-playlist-play',
text: 'Playlists'
},
{
icon: 'mdi-clock',
text: 'Watch Later'
},
],
items2: [{
picture: 28,
text: 'Joseph'
},
{
picture: 38,
text: 'Apple'
},
{
picture: 48,
text: 'Xbox Ahoy'
},
{
picture: 58,
text: 'Nokia'
},
{
picture: 78,
text: 'MKBHD'
},
],
}),
created() {
this.$vuetify.theme = true
},
}
</script>
<template>
<div>
<v-alert style="top:8px" v-model="alert" dismissible close-icon="mdi-delete" border="left" elevation="2" outlined type="success" text>
Welcome back BlogeR ! Now you can see upgrade photo ~
</v-alert>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
alert: true,
}
},
}
</script>